import React, {useEffect,} from 'react'
import {connect} from 'react-redux'
import LiveRoomHeader from "./components/LiveRoomHeader/LiveRoomHeader"
import LiveRoomTabs from "./components/LiveRoomTabs/LiveRoomTabs"
import {steamers} from "../../utils/mockdata"
import {live} from "../../redux/live";


const LiveRoomContainer = props => {
    // const starDemoId = '8b30e9b4-6b1b-452e-a16c-7dfa49b10c90'
    const {
        match: {
            params: {starId,},
        },
        // liveDetail,
        fetchLiveDetail,
        fetchUserDetail,
    } = props
    const star = steamers.find(s => s.id === Number(starId))
    //
    useEffect(() => {
        // fetchLiveDetail({uid: starId,})
        const starId = "8b30e9b4-6b1b-452e-a16c-7dfa49b10c90"
        fetchLiveDetail({uid: starId,})
        // const userId = localStorage.getItem('userid')
        // fetchUserDetail({uid: userId,})
    }, [])


    const template = (
        <>
            <LiveRoomHeader
                star={star}
                // liveDetail={liveDetail}
            />
            <LiveRoomTabs star={star} />
        </>
    )
    return template

}

const mapState = state => ({
    liveDetail: state.live.liveDetail,
    userDetail: state.user.userDetail,
})

const mapDispatch = dispach => ({
    fetchUserDetail: payload => dispach.user.fetchUserDetail(payload),
    fetchLiveDetail: payload => dispach.live.doFetchLiveDetail(payload),
})


export default connect(mapState, mapDispatch)(LiveRoomContainer)
